<template>
  <div class="login-container" />
</template>

<script>

export default {
  name: 'LoginFail',
  data() {
    return {
      message: '登录失败，请重试！',
      loaded: false
    }
  },
  created() {

  },
  mounted() {
    const errno = this.$route.query.errno
    if (errno === undefined || errno === null) {
      this.message = '登录失败，请重试！'
    } else if (errno === 'ticket') {
      this.message = '统一认证信息错误,请联系系统维护人员'
    }

    this.$alert(this.message)
  },
  destroyed() {
  },
  methods: {}
}
</script>

<style lang="scss">
  $bg: #2d3a4b;
  $dark_gray: #1a3342;
  $light_gray: #308a8d;

  .login-container {
    min-height: 100%;
    width: 100%;
    background-image: url(~@/assets/login.png);
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-size: cover;
    overflow: hidden;

    .login-form {
      position: relative;
      width: 400px;
      max-width: 100%;
      top: 35%;
      left: 65%;
      overflow: hidden;
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }

    .title-container {
      position: relative;

      .title {
        font-size: 28px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }

    .thirdparty-button {
      position: absolute;
      right: 0;
      bottom: 6px;
    }

    @media only screen and (max-width: 470px) {
      .thirdparty-button {
        display: none;
      }
    }
  }
</style>
